<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>单选/复选/开关</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>


</head>

<body ontouchstart>

<div class="weui_cells weui_cells_form ">

  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">多列:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="" id='text1'/>

    </div>

  </div>
  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">单列:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="" id='text2'/>

    </div>

  </div>

  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">日期:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="" id='date'/>

    </div>

  </div>

  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">时间:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="" id='time'/>

    </div>

  </div>

  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">时间2:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="09 12" id='time2'/>

    </div>

  </div>

  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">省市县:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="" id='ssx'/>

    </div>

  </div>

  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">省市:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="" id='ss'/>

    </div>

  </div>

</div>


<div id='time33'></div>


<div class="weui_cells weui_cells_form ">
  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">弹出单选:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="" id='d1'/>

    </div>

  </div>


  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">弹出单选:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="" id='d2'/>
    </div>
  </div>
  <div class="weui_cell">
    <div class="weui_cell_hd"><label for="" class="">弹出复选:</label></div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="text" value="" id='d3'/>

    </div>

  </div>

  <div class="weui_cell">
    <div class="weui_cell_bd weui_cell_primary"><p>Number</p></div>
    <div style="font-size: 0px;" class="weui_cell_ft">
      <a class="number-selector number-selector-sub needsclick">-</a>
      <input pattern="[0-9]*" class="number-input" style="width: 50px;" value='1' data-min="1" data-max="10"
             data-step="2">
      <a class="number-selector number-selector-plus needsclick">+</a>
    </div>
    <div class="weui_cell_ft" style="display: none;"> 0</div>
  </div>


  <div class="weui_cell">
    <div class="weui_cell_bd weui_cell_primary"><p>Number</p></div>
    <div style="font-size: 0px;" class="weui_cell_ft">
      <a class="number-selector number-selector-sub needsclick">-</a>
      <input pattern="[0-9]*" class="number-input" style="width: 50px;" value='0' data-min="0" data-max="10"
             data-step="1">
      <a class="number-selector number-selector-plus needsclick">+</a>
    </div>
    <div class="weui_cell_ft" style="display: none;"> 0</div>
  </div>


</div>

<div class="rater">
  <a class="rater-box"
     style="margin-right: 2px; font-size: 25px; width: 25px; height: 25px; color: rgb(255, 204, 102);"> <span
          class="rater-inner">★</span> </a>
  <a class="rater-box"
     style="margin-right: 2px; font-size: 25px; width: 25px; height: 25px; color: rgb(255, 204, 102);"> <span
          class="rater-inner">★</span> </a>
  <a class="rater-box"
     style="margin-right: 2px; font-size: 25px; width: 25px; height: 25px; color: rgb(255, 204, 102);"> <span
          class="rater-inner">★</span> </a>
  <a class="rater-box"
     style="margin-right: 2px; font-size: 25px; width: 25px; height: 25px; color: rgb(255, 204, 102);"> <span
          class="rater-inner">★</span> </a>
  <a class="rater-box" style="margin-right: 2px; font-size: 25px; width: 25px; height: 25px;"> <span
          class="rater-inner">★</span> </a>
</div>

<div class='p'><a href="javascript:;" class="weui_btn weui_btn_primary open-popup " data-target="#popup">popup</a></div>

<div id="popup" class="weui-popup-container">
  <div class="weui-popup-modal">

    <h2 class="title">章标题</h2>
    <section>
      <h3>1.1 节标题</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute</p>
    </section>
    <p class='p'><a href="javascript:;" class="weui_btn weui_btn_plain_primary close-popup">关闭</a></p>
  </div>
  <script src="../zepto.min.js"></script>
  <script src="../example.js"></script>
  <script src="../picker.js"></script>

  <script>
    $("#text2").picker({
      title: "你喜欢的国家",
      toolbarCloseText: '确定',
      cols: [
        {
          textAlign: 'center',
          values: [1, 2, 3],
          displayValues: ['新西兰', '美国', '日本'],
        }
      ]
    });
    $("#text1").picker({
      title: "他们都喜欢什么",
      cols: [
        {
          textAlign: 'center',
          values: ['刘备', '关羽', '张飞']
        },
        {
          textAlign: 'center',
          values: ['喜欢', '憎恶', '基情', '可怜']
        },
        {
          textAlign: 'center',
          values: ['吃西瓜', '吃盒饭', '喝酒']
        }
      ]
    });


    $("#date").datetimePicker({title: "选择日期", m: 1});
    $("#time").datetimePicker({title: "选择日期时间"});
    $("#time2").picker({
      title: "选择时间",
      cols: [
        {
          textAlign: 'center',
          values: (function () {
            var arr = [];
            for (var i = 0; i <= 23; i++) {
              arr.push(i < 10 ? '0' + i : i);
            }
            return arr;
          })()

        },
        {
          textAlign: 'center',
          values: (function () {
            var arr = [];
            for (var i = 0; i <= 59; i++) {
              arr.push(i < 10 ? '0' + i : i);
            }
            return arr;
          })(),
        }
      ]
    });
    $("#ssx").cityPicker({
      title: "选择省市县"
    });

    $("#ss").cityPicker({
      title: "选择省市",
      showDistrict: false
    });
    $("#d1").select({
      title: "选择爱好",
      autoClose: true,

      items: ['男人', '女人', '外星人'],
      onChange: function (d) {
        $.alert("你选择了" + d.values);
      }
    });
    $("#d2").select({
      title: "选择爱机",
      items: [
        {
          title: "iPhone 3GS",
          value: "001",
        },
        {
          title: "iPhone 5",
          value: "002",
        },
        {
          title: "iPhone 5S",
          value: "003",
        }
      ],
      onChange: function (d) {
        $.alert("你选择了" + d.values + d.titles);
      }
    });
    $("#d3").select({
      title: "您的爱好",
      multi: true,
      split: ',',
      closeText: '完成',
      items: [
        {
          title: "画画",
          value: 1
        },
        {
          title: "打球",
          value: 2
        },
        {
          title: "唱歌",
          value: 3
        },
        {
          title: "游泳",
          value: 4
        },
      ],
      onChange: function (d) {
        $.alert("你选择了" + d.values + d.titles);
      }
    });


    $('.number-selector-plus').click(function () {
      upDownOperation($(this));
    });
    $('.number-selector-sub').click(function () {
      upDownOperation($(this));
    });
    function upDownOperation(element) {
      var _input = element.parent().find('input'),
              _value = _input.val(),
              _step = _input.attr('data-step') || 1;
      //检测当前操作的元素是否有disabled，有则去除
      element.hasClass('disabled') && element.removeClass('disabled');
      //检测当前操作的元素是否是操作的添加按钮（.input-num-up）‘是’ 则为加操作，‘否’ 则为减操作
      if (element.hasClass('number-selector-plus')) {
        var _new_value = parseInt(parseFloat(_value) + parseFloat(_step)),
                _max = _input.attr('data-max') || false,
                _down = element.parent().find('.number-selector-sub');

        //若执行‘加’操作且‘减’按钮存在class='disabled'的话，则移除‘减’操作按钮的class 'disabled'
        _down.hasClass('disabled') && _down.removeClass('disabled');
        if (_max && _new_value >= _max) {
          _new_value = _max;
          element.addClass('disabled');
        }
      } else {
        var _new_value = parseInt(parseFloat(_value) - parseFloat(_step)),
                _min = _input.attr('data-min') || false,
                _up = element.parent().find('.number-selector-plus');
        //若执行‘减’操作且‘加’按钮存在class='disabled'的话，则移除‘加’操作按钮的class 'disabled'
        _up.hasClass('disabled') && _up.removeClass('disabled');
        if (_min && _new_value <= _min) {
          _new_value = _min;
          element.addClass('disabled');
        }
      }
      _input.val(_new_value);
    }
  </script>


</body>
</html>
